<template>
	<div class="pre-order">
		<h1>选择教练</h1>
		<div class="mine-item" @click="chooseCoach">
			<p class="mine-avatar">
				<span class="fr"><i class="micon-1"></i></span>
				<span class="img-wrap" v-if="coachDetail.portraitPictureFileUrl"><img
						:src="coachDetail.portraitPictureFileUrl" class="mine-img" mode="aspectFill"></span>
				<span v-if="coachDetail.userName">{{ coachDetail.userName }}</span>
				<span v-else>请选择</span>
			</p>
		</div>
		<h1>选择会员</h1>
		<div class="mine-item" @click="chooseMember">
			<p class="mine-avatar">
				<span class="fr"><i class="micon-1"></i></span>
				<span class="img-wrap" v-if="memberDetail.portraitPictureFileUrl"><img
						:src="memberDetail.portraitPictureFileUrl" class="mine-img" mode="aspectFill"></span>
				<span v-if="memberDetail.userName">{{ memberDetail.userName }}</span>
				<span v-else>请选择</span>
			</p>
		</div>
		<h1>选择课程</h1>
		<div class="mine-item" @click="chooseCourse">
			<p class="mine-avatar">
				<span class="fr"><i class="micon-1"></i></span>
				<span class="img-wrap" v-if="courseDetail.frontImageFileUrl"><img :src="courseDetail.frontImageFileUrl"
						class="mine-img" mode="aspectFill"></span>
				<span v-if="courseDetail.courseName">{{ courseDetail.courseName }}</span>
				<span v-else>请选择</span>
			</p>
		</div>
		<h1>预约时间</h1>
		<div class="pre-item">
			<div class="date-wrap">
				<i class="picon-pre" @click="preDate"></i>
				<ul class="list-date">
					<li :class="{ 'active': activeIndex == index }" @click="changeIndex(index)"
						v-for="(item, index) in weekList" :key="index">
						<p>{{ format(item, 'd') }}</p>
						<h5>{{ format(item) }}</h5>
					</li>
				</ul>
				<i class="picon-next" @click="nextDate"></i>
			</div>
			<div class="time-wrap">
				<p>可预约时间</p>
				<ul class="list-time">
					<li :class="{ 'active': activeTime === index }" v-for="(item, index) in dateTime1" :key="index"
						@click="changeTime(index)" v-if="filterDateTimeArr.indexOf(item) < 0">
						<span>{{ item }}</span>
					</li>
				</ul>
			</div>
		</div>
		<span class="next-step" @click="openDialog">下一步</span>

		<uni-popup ref="popup" type="center" :mask-click="true">
			<div class="dialog-center">
				<div class="dialog-body">
					<h2>预约确认</h2>
					<p><span>教练</span><em>{{ coachDetail.userName }}</em></p>
					<p><span>课程</span><em>{{ courseDetail.courseName }}</em></p>
					<p><span>预约时间</span><em>{{ orderDate }} {{ dateTime1[activeTime] }}</em></p>
					<!-- <p><span>预约时间</span><em>{{ orderDate }}  {{ dateTime1[activeTime] }} - {{ endTime }}</em></p> -->
				</div>
				<div class="dialog-footer">
					<p>
						<span class="btn-back" @click="closeDialog">返回</span>
						<span class="btn-success" @click="confirmDialog">确认</span>
					</p>
				</div>
			</div>
		</uni-popup>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { signGet, getPublicUrl, coachOrderAdd, coachBookedTime } from '@/api/manageApi'
import { getStore, setStore } from '@/util/service'
import dayjs from 'dayjs';
export default {
	data() {
		return {
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			scrollHeight: 200,
			scrollLeft: 0,
			addressList: [],
			coachArr: [],
			coachDetail: {},
			courseList: [],
			courseDetail: {},
			memberDetail: {},
			dateTime: [
				'00:00',
				'00:30',
				'01:00',
				'01:30',
				'02:00',
				'02:30',
				'03:00',
				'03:30',
				'04:00',
				'04:30',
				'05:00',
				'05:30',
				'06:00',
				'06:30',
				'07:00',
				'07:30',
				'08:00',
				'08:30',
				'09:00',
				'09:30',
				'10:00',
				'10:30',
				'11:00',
				'11:30',
				'12:00',
				'12:30',
				'13:00',
				'13:30',
				'14:00',
				'14:30',
				'15:00',
				'15:30',
				'16:00',
				'16:30',
				'17:00',
				'17:30',
				'18:00',
				'18:30',
				'19:00',
				'19:30',
				'20:00',
				'20:30',
				'21:00',
				'21:30',
				'22:00',
				'22:30',
				'23:00',
				'23:30'
			],
			activeIndex: 0,
			weekList: [],
			datePage: 0,
			activeTime: 0,
			courseTimes: '',
			endTime: '',
			dateTime1: [],
			orderDate: '',
			filterDateTimeArr: []
		}
	},
	computed: {
		...mapGetters(['userInfo', 'uniToken', 'role'])
	},
	onLoad(option) {
		if (JSON.parse(this.role)[0] == 'COACH') {
			this.coachDetail = this.userInfo
			if (this.coachDetail.portraitPictureFileId) {
				getPublicUrl({ fileId: this.coachDetail.portraitPictureFileId }).then(response => {
					this.$set(this.coachDetail, 'portraitPictureFileUrl', response.data)
				})
			}
		}
		if (option.from == 'member') {
			if (getStore('memberData')) {
				this.memberDetail = JSON.parse(getStore('memberData'))
			}
		}
		this.setWeekList(this.datePage)
	},
	methods: {
		preDate() {
			if (this.datePage > 0) {
				this.datePage--
				this.setWeekList(this.datePage)
				this.changeIndex(0)
			}
		},
		nextDate() {
			this.datePage++
			this.setWeekList(this.datePage)
			this.changeIndex(0)
		},
		changeIndex(index) {
			this.activeIndex = index
			this.setDateTime()
		},
		setDateTime() {
			if (this.datePage === 0 && this.activeIndex === 0) {
				var start = this.dateTime.indexOf(this.courseDetail.allowAttendClassStartTime)
				var end = this.dateTime.indexOf(this.courseDetail.allowAttendClassEndTime)
				// console.log(start, end)
				var hours = new Date().getHours() + 0
				var minus = new Date().getMinutes()
				var minusObj = 0
				if (minus > 30) {
					hours += 1
					minusObj = '00'
				} else {
					minusObj = '30'
				}
				var startStr = (hours < 10 ? '0' + hours : hours) + ':' + minusObj
				// console.log(startStr)
				var startStrIndex = this.dateTime.indexOf(startStr)
				if (startStrIndex >= 0 && startStrIndex < end) {
					var s = start > startStrIndex ? start : startStrIndex
					this.dateTime1 = this.dateTime.slice(s, end + 1)
				} else if (startStrIndex >= 0 && startStrIndex == end) {
					this.dateTime1 = [this.courseDetail.allowAttendClassEndTime]
				} else {
					this.dateTime1 = []
				}
			} else {
				var start = this.dateTime.indexOf(this.courseDetail.allowAttendClassStartTime)
				var end = this.dateTime.indexOf(this.courseDetail.allowAttendClassEndTime)
				this.dateTime1 = this.dateTime.slice(start, end + 1)
			}
			this.filterDateTime()
		},
		filterDateTime() {
			var params = {
				userId: this.coachDetail.userId,
				date: this.weekList[this.activeIndex].format('YYYY/MM/DD')
				// date: new Date().getFullYear() + '/' + this.weekList[this.activeIndex].split(' ')[1]
			}
			coachBookedTime(params).then(response => {
				var filterDate = response.data
				console.log(filterDate)
				var filterTimeArr = []
				var filterTimeStrArr = []
				var timeIndexLen
				if (filterDate.length > 0) {
					filterDate.forEach((item, index) => {
						var s = new Date(item.start).getTime()
						var e = new Date(item.end).getTime()
						var cTime = e - s
						s = s - cTime
						timeIndexLen = Math.ceil((e - s) / (30 * 60 * 1000))
						console.log(timeIndexLen)
						for (var i = 1; i < timeIndexLen; i++) {
							if (filterTimeArr.indexOf((s + (30 * 60 * 1000) * i)) < 0) {
								filterTimeArr.push(s + (30 * 60 * 1000) * i)
							}
						}
					})
					filterTimeArr.forEach((item, index) => {
						var d = new Date(item)
						var h = d.getHours() < 10 ? '0' + d.getHours() : d.getHours()
						var m = d.getMinutes() < 10 ? '0' + d.getMinutes() : d.getMinutes()
						var str = h + ':' + m
						filterTimeStrArr.push(str)
					})
					// 添加跨天逻辑
					for (var i = 1; i < timeIndexLen / 2; i++) {
						filterTimeStrArr.push(this.dateTime[this.dateTime.length - i])
					}
					console.log(filterTimeStrArr, timeIndexLen)
				}
				this.filterDateTimeArr = filterTimeStrArr
			})
		},
		setWeekList(page) {
			var index = 0
			for (let i = page * 7; i <= 6 + page * 7; i++) {
				this.$set(this.weekList, index, dayjs().add(i, 'day'))
				index++
			}
		},
		format(item, format) {
			var week = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
			if (format == 'd') {
				if (item.format('YYYY-MM-DD') == dayjs().format('YYYY-MM-DD')) {
					return '今天'
				}
				if (item.format('YYYY-MM-DD') == dayjs().add(1, 'day').format('YYYY-MM-DD')) {
					return '明天'
				}
				return week[item.format(format)]
			}
			if (format) {
				return item.format(format)
			}
			return item.format('MM/DD')
		},

		radioChange() { },
		openDialog() {
			if (this.dateTime1[this.activeTime]) {
				this.getCourseDetail(this.courseDetail.id)
				this.$refs.popup.open()
			} else {
				this.uShowToast('预约时间不能为空')
			}
		},
		closeDialog() {
			this.$refs.popup.close()
		},
		changeTime(index) {
			this.activeTime = index
		},
		confirmDialog() {
			var params = {
				'classStartTime': this.orderDate.replace(/\//g, '-') + ' ' + this.dateTime1[this.activeTime] + ':00',
				'memberUserId': this.memberDetail.id,
				'signCourseId': this.courseDetail.id,
				'teachCoachUserId': this.coachDetail.userId
			}
			this.dialogLoading = true
			coachOrderAdd(params).then(res => {
				// console.log(res)
				if (res.code == '200') {
					this.uShowToast(res.msg)
					this.goUrl('/pagesA/preOrder/preOrderHistory')
				} else {
					this.uShowModel('提示', res.msg, null)
				}
				this.dialogLoading = false
			})
		},
		chooseCourse() {
			// console.log(this.coachDetail)
			// console.log(this.memberDetail)
			if (this.coachDetail.userName && this.memberDetail.userName) {
				var url = '/pagesA/home/selectCourse?coachId=' + this.coachDetail.userId + '&memberId=' + this.memberDetail.id
				uni.navigateTo({
					url: url,
					events: {
						//获取下级页面传递回来的参数
						sonPageData: data => {
							// console.log(data)
							this.courseDetail = data
							this.setDateTime()
						}
					}
				})
			} else {
				this.uShowToast('请先选择教练或者会员')
			}
		},
		chooseMember() {
			if (this.coachDetail.userName) {
				var url = '/pagesA/home/selectMember?coachId=' + this.coachDetail.userId
				uni.navigateTo({
					url: url,
					events: {
						//获取下级页面传递回来的参数
						sonPageData: data => {
							// console.log(data)
							this.memberDetail = data
						}
					}
				})
			} else {
				this.uShowToast('请先选择教练')
			}
		},
		getCourseDetail(val) {
			var params = {
				id: val
			}
			signGet(params).then(res => {
				// console.log(res)
				if (res.code == 200) {
					var data = res.data
					var year = new Date().getFullYear()
					var dateStr = this.weekList[this.activeIndex].format('YYYY/MM/DD') + ' ' + this.dateTime1[this.activeTime]
					// console.log(dateStr)
					var dt = new Date(dateStr).getTime() + data.courseSnapshot.courseTimes * 60 * 1000
					var dtN = new Date(dt)
					this.endTime = dtN.getHours() + ':' + dtN.getMinutes()
					this.orderDate = this.weekList[this.activeIndex].format('YYYY/MM/DD')
				}
			})
		},
		chooseCoach() {
			var url = '/pagesA/home/selectCoach?&role=coach'
			uni.navigateTo({
				url: url,
				events: {
					//获取下级页面传递回来的参数
					sonPageData: data => {
						// console.log(data)
						this.coachDetail = data
					}
				}
			})
		}
	}
}
</script>
<style lang="scss">
.pre-order {
	.fr {
		float: right;
	}

	.micon-1 {
		width: 10rpx;
		height: 18rpx;
		display: inline-block;
		background: url(../../static/right2.png) no-repeat 0 0;
		background-size: cover;
		margin-left: 20rpx;
	}

	.mine-img {
		max-width: 96rpx;
		max-height: 96rpx;
		vertical-align: middle;
		border-radius: 15rpx;
	}

	h1 {
		width: 702rpx;
		margin: 32rpx auto 24rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #1E1E1E;
	}

	.mine-item {
		width: 702rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 16rpx 28rpx;
		box-sizing: border-box;
		margin: 0 auto;

		p {
			font-size: 30rpx;
			color: #1E1E1E;
			margin: 36rpx 0;

			span {
				font-size: 28rpx;
				color: #838383;
			}
		}

		.mine-avatar {
			margin: 0;
			height: 96rpx;
			line-height: 96rpx;

			.img-wrap {
				width: 96rpx;
				height: 96rpx;
				display: inline-block;
				vertical-align: middle;
				line-height: 96rpx;
				text-align: center;
				margin-right: 10rpx;
			}

			.micon-1 {
				margin-top: 41rpx;
			}
		}
	}

	.pre-item {
		width: 702rpx;
		margin: 0 auto;
		// height: 484rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		.date-wrap {
			padding: 36rpx 0 31rpx;
			border-bottom: 1px solid #eee;
			position: relative;

			.picon-pre {
				width: 22rpx;
				height: 40rpx;
				background: url('../../static/d7.png') no-repeat 0 0;
				background-size: cover;
				display: inline-block;
				position: absolute;
				left: 12rpx;
				top: 60rpx;
			}

			.picon-next {
				width: 22rpx;
				height: 40rpx;
				background: url('../../static/d9.png') no-repeat 0 0;
				background-size: cover;
				display: inline-block;
				position: absolute;
				right: 24rpx;
				top: 60rpx;
			}

			.list-date {
				li {
					display: inline-block;
					margin-left: 30rpx;
					width: 60rpx;
					text-align: center;

					p {
						font-size: 24rpx;
						color: #BFBFBF;
						margin-bottom: 20rpx;
					}

					h5 {
						font-size: 20rpx;
						color: #1E1E1E;
						height: 38rpx;
						line-height: 38rpx;
					}
				}

				li:first-child {
					margin-left: 44rpx;
				}

				li.active p {
					color: #FF5A20;
				}

				li.active h5 {
					background: #FF5D3D;
					border-radius: 8rpx;
					color: #FFFFFF;
				}
			}
		}

		.time-wrap {
			padding: 26rpx 28rpx;

			p {
				font-size: 26rpx;
				color: #575757;
				margin-bottom: 29rpx;
			}

			.list-time {
				li {
					display: inline-block;
					width: 142rpx;
					height: 56rpx;
					background: #FFFFFF;
					border-radius: 28rpx;
					border: 1px solid #FF5D3D;
					line-height: 54rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FF5A20;
					margin-right: 26rpx;
					margin-bottom: 24rpx;
					box-sizing: border-box;
				}

				li:nth-child(4n) {
					margin-right: 0rpx;
				}

				li.active {
					background: #FF5D3D;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.next-step {
		width: 646rpx;
		height: 80rpx;
		background: #FF5D3D;
		border-radius: 40rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		display: block;
		margin: 24rpx auto;
	}

	.dialog-center {
		width: 100%;
		// height: 460rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 44rpx 54rpx;
		box-sizing: border-box;

		.dialog-body {
			h2 {
				font-size: 32rpx;
				color: #1E1E1E;
				margin-bottom: 52rpx;
				text-align: center;
			}

			p {
				font-size: 28rpx;
				color: #838383;
				margin-bottom: 27rpx;
				display: flex;

				span {
					display: inline-block;
					width: 120rpx;
					text-align: right;
					margin-right: 41rpx;
				}

				em {
					font-size: 28rpx;
					color: #1E1E1E;
				}
			}
		}

		.dialog-footer {
			margin-top: 66rpx;

			.btn-back {
				width: 244rpx;
				height: 80rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				border: 1px solid #FF5A20;
				font-size: 32rpx;
				color: #FF5A20;
				text-align: center;
				line-height: 80rpx;
				margin-right: 15rpx;
				display: inline-block;
			}

			.btn-success {
				width: 244rpx;
				height: 80rpx;
				background: #FF5D3D;
				border-radius: 40rpx;
				font-size: 32rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 80rpx;
				display: inline-block;
			}
		}
	}

	.list-coachs {
		width: 100%;

		li {
			width: 100%;
			height: 204rpx;
			background: #FFFFFF;
			border-radius: 25rpx;
			box-sizing: border-box;
			padding: 32rpx 28rpx;
			display: flex;
			margin-top: 24rpx;

			.cover {
				width: 140rpx;
				height: 140rpx;
				border-radius: 10rpx;
				margin-right: 20rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			h4 {
				font-size: 30rpx;
				color: #1E1E1E;
				line-height: 30rpx;
				margin-bottom: 13rpx;
			}

			i {
				padding: 0 30rpx;
				height: 36rpx;
				line-height: 36rpx;
				background: #FFFFFF;
				border-radius: 5rpx;
				border: 1px solid #BFBFBF;
				font-size: 22rpx;
				color: #838383;
				display: inline-block;
				margin-right: 10rpx;
			}

			.uni-rate {
				margin: 10rpx 0;
			}
		}
	}
}
</style>
